// 一级路由 首页
import {useState,useEffect} from 'react'
import { useOutlet,useNavigate} from "react-router-dom"
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import {useSelector,useDispatch}from 'react-redux'
import {handleUrlIndex}  from '../store/urlSlice'
export default function Zin() {
    const urlIndex=useSelector(store=>store.url.urlIndex)
    const dispach=useDispatch()
    console.log(urlIndex);
    
    const nav=useNavigate()
    
    const  handleChange=(v)=>{
        dispach(handleUrlIndex(v))
        nav(v)
    }
    let outlet = useOutlet()
   
    return <>
        <div>
            <Tabbar style={{height:"4rem"}} value={urlIndex}  onChange={v => handleChange(v)} >
                <Tabbar.Item name='/zin/index' icon={<HomeO fontSize="2rem"/>} style={{fontSize:"1rem"}} >
                    首页
                </Tabbar.Item>
                <Tabbar.Item name='/zin/publishProduct' icon={<Search fontSize="2rem" />} style={{fontSize:"1rem"}}>
                    发布
                </Tabbar.Item>
                <Tabbar.Item name='/zin/information' icon={<FriendsO fontSize="2rem"/>}style={{fontSize:"1rem"}}>
                    消息
                </Tabbar.Item>
                <Tabbar.Item name='/zin/myPI' icon={<SettingO fontSize="2rem"/>} style={{fontSize:"1rem"}}>
                    我的
                </Tabbar.Item>
            </Tabbar>
        </div>
        {outlet}
    </>
}